import { useState, useEffect } from 'react';
import { Table, Tabs, DatePicker, message, Button } from 'antd';
import { exportSales, querySalesAll } from './service';
import { saveFileAs } from '@/utils/utils';
import Access from '@/components/Access/Access';
const { TabPane } = Tabs;
const { RangePicker } = DatePicker;

const SalesAll = () => {
  const [tabsState, setTabsState] = useState(1);
  const [salesSituation, setSalesSituation] = useState([]);
  const [timer, setTimer] = useState();
  const [loading, setLoading] = useState(false);
  const [changeTimer,handleChangeTimer]=useState({})
  const callback = (e) => {
    setTabsState(e);
    handleSales({
      type: e === '3' ? 2 : e,
      subType: e,
      startTime: timer ? timer.startTime : null,
      endTime: timer ? timer.endTime : null,
    });
  };
  const handleChange = (e, dateString) => {
    setTimer({
      startTime: dateString[0],
      endTime: dateString[1],
    });
    handleSales({
      type: tabsState === '3' ? 2 : tabsState,
      subType: tabsState,
      startTime: dateString[0],
      endTime: dateString[1],
    });
    handleChangeTimer({
      startTime: dateString[0],
      endTime: dateString[1],
    })
  };
  const handleSales = (payload) => {
    setLoading(true);
    const yearStart = `${new Date().getFullYear()}-01-01`;
    const yearEnd = `${new Date().getFullYear()}-12-31`;
    querySalesAll({
      type: payload?.type,
      subType: payload?.subType,
      startTime: payload.startTime ? payload.startTime : yearStart,
      endTime: payload.endTime ? payload.endTime : yearEnd,
    })
      .then((res) => {
        const { code } = res;
        setLoading(false);
        return code === 0 ? setSalesSituation(res.data) : message.info(res.message);
      })
      .catch((err) => {
        console.log(err);
      });
  };
  useEffect(() => {
    handleSales({ type: 1, subType: 1 });
  }, []);
  const salesColumns = [
    {
      title: '销售人员',
      dataIndex: 'sellerName',
      valueType: 'text',
      key: 'sellerName',
    },
    {
      title: '销售人员工号',
      dataIndex: 'sellerNumber',
      valueType: 'text',
      key: 'sellerNumber',
    },
    {
      title: '开单店铺',
      dataIndex: 'storeName',
      key: 'storeName',
    },
    {
      title: '销售总金额',
      dataIndex: 'amountTotal',
      key: 'amountTotal',
    },
    {
      title: '销售数量',
      dataIndex: 'amountTotalCount',
      key: 'amountTotalCount',
    },
    {
      title: '提成比例',
      dataIndex: 'commissionScale',
      key: 'commissionScale',
    },
    {
      title: '提成金额',
      dataIndex: 'commissionAmount',
      key: 'commissionAmount',
    },


  ];
  return (
    <div>
      <Tabs
        defaultActiveKey="1"
        onChange={callback}
        style={{ background: 'white', paddingLeft: 10 }}
        tabBarExtraContent={
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <RangePicker onChange={handleChange} format={['YYYY-MM-DD']} />
            <Access accessKey={"@exportSalesCount"}>
              <Button
                danger
                htmlType="submit"
                style={{ marginLeft: 20 }}
                onClick={() => {
                  const yearStart = `${new Date().getFullYear()}-01-01`;
                  const yearEnd = `${new Date().getFullYear()}-12-31`;
                  const list = {
                    type: tabsState === '3' ? 2 : tabsState,
                    subType: tabsState,
                    startTime: changeTimer.startTime ? changeTimer.startTime : yearStart,
                    endTime: changeTimer.endTime ? changeTimer.endTime : yearEnd,
                  };
                  exportSales(list)
                    .then((res) => {
                      if (res) {
                        saveFileAs(res, '销售人员业绩统计');
                      }
                    })
                    .catch((err) => {
                      message.error(err);
                    });
                }}
              >
                导出销售人员业绩统计
              </Button>
            </Access>

          </div>
        }
      >
        <TabPane tab="消费商品" key="1"></TabPane>
        <TabPane tab="会员消费" key="2"></TabPane>
        <TabPane tab="会员开卡" key="3"></TabPane>
      </Tabs>
      <Table columns={salesColumns} rowKey={'storeId'} dataSource={salesSituation} bordered loading={loading}/>
    </div>
  );
};

export default SalesAll;
